{% extends 'base.html' %}
{% load staticfiles %}
{% block head %}
    <link rel="stylesheet" href="{% static 'edit/css/editormd.preview.css' %}">
    <link rel="stylesheet" href="{% static 'edit/css/style.css' %}">
{% endblock %}
{% block content %}
    <div class="row">
        {% include 'right.html' %}
        <main class="col-md-9">
            <article class="post post-1">
                <header class="entry-header">
                    <h1 class="entry-title">{{ post.title }}</h1>
                    <div class="entry-meta">
                        <span class="post-category"><a href="#">{{ post.category.name }}</a></span>
                        <span class="post-date"><a href="#"><time class="entry-date"
                                                                  datetime="{{ post.created_time }}">{{ post.created_time }}</time></a></span>
                        <span class="post-author"><a href="#">{{ post.author }}</a></span>
                        <span class="comments-link"><a href="#">4 评论</a></span>
                        <span class="views-count"><a href="#">588 阅读</a></span>
                    </div>
                </header>
                <div class="entry-content clearfix" id="test-editormd-view2">
                    <textarea id="append-test">{{ post.body }}</textarea>
                </div>
            </article>
            <section class="comment-area" id="comment-area">
                <hr>
                <h3>发表评论</h3>
                <form action="{% url 'comment:comment' post.pk %}" method="post" class="comment-form">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-4">
                            <input type="text" class="form-control" placeholder="请输入名字" name="name">
                        </div>
                        <div class="col-lg-8">
                            <div class="input-group">
                                <input type="text" class="form-control" name="email" placeholder="请输入邮箱">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="submit">评论</button>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <textarea name="text" id="id_comment" required placeholder="请输入评论内容"></textarea>
                        </div>
                    </div>    <!-- row -->
                </form>
                <div class="comment-list-panel">
                    <h3>评论列表，共 <span>{{ comment_list.count }}</span> 条评论</h3>
                    <ul class="comment-list list-unstyled">
                        {% for comment in comment_list %}
                            <li class="comment-item">
                                <span class="nickname">{{ comment.name }}</span>
                                <time class="submit-date"
                                      datetime="{{ comment.created_time }}">{{ comment.created_time }}
                                </time>
                                <div class="text">
                                    {{ comment.text }}
                                </div>
                            </li>
                        {% empty %}
                            <span>暂无评论</span>
                        {% endfor %}
                    </ul>
                </div>
            </section>
        </main>
    </div>


    <script src="{% static 'edit/examples/js/jquery.min.js' %}"></script>
    <script src="{% static 'edit/lib/marked.min.js' %}"></script>
    <script src="{% static 'edit/lib/prettify.min.js' %}"></script>
    <script src="{% static 'edit/lib/raphael.min.js' %}"></script>
    <script src="{% static 'edit/lib/underscore.min.js' %}"></script>
    <script src="{% static 'edit/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'edit/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'edit/lib/jquery.flowchart.min.js' %}"></script>

    <script src="{% static 'edit/editormd.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            var testEditormdView, testEditormdView2;

            $.get("test.md", function (markdown) {

                testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                    markdown: markdown,//+ "\r\n" + $("#append-test").text(),
                    //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                    htmlDecode: "style,script,iframe",  // you can filter tags decode
                    //toc             : false,
                    tocm: true,    // Using [TOCM]
                    //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                    //gfm             : false,
                    //tocDropdown     : true,
                    // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                    emoji: true,
                    taskList: true,
                    tex: true,  // 默认不解析
                    flowChart: true,  // 默认不解析
                    sequenceDiagram: true  // 默认不解析
                });

                //console.log("返回一个 jQuery 实例 =>", testEditormdView);

                // 获取Markdown源码
                //console.log(testEditormdView.getMarkdown());

                //alert(testEditormdView.getMarkdown());
            });

            testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
                htmlDecode: "style,script,iframe",  // you can filter tags decode
                emoji: true,
                taskList: true,
                tex: true,  // 默认不解析
                flowChart: true,  // 默认不解析
                sequenceDiagram: true  // 默认不解析
            });
        });
    </script>
{% endblock %}

